<script setup>
import  { tool }  from "../tool/index"

import { ref, onMounted,inject } from "vue"
import { StarFilled,ArrowDownBold,ArrowUpBold } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"

const getImgPath = tool.serverPath+"api/app_api/image/download?fileName="

const store = inject('store')
const id = ref(store.state.user.id)
const router = useRouter()
const pageCount = ref()
const limit = ref(10)
const offset = ref(1)
const FldLimit = ref(10)
const FldOffset = ref(1)
const blogs = ref()
const FldUser = ref()
const FldUsers = ref()
const FldUserRef = ref()
const FldUser_searchRef = ref()
const OnFIdUser = ref(false)
const search_input_value = ref()
const FldUserCount = ref()

function openFIdUser() {
    if (FldUserRef.value.style.height == '400px') {
        OnFIdUser.value = false
        FldUserRef.value.style.height = '100px'
        FldUser_searchRef.value.style.height = "0px"

    } else {
        OnFIdUser.value = true
        FldUserRef.value.style.height = '400px'
        FldUser_searchRef.value.style.height = "40px"
    }
}
async function GetFollId() {
    try {
        const data = {
            key: "Search",
            data: {
                key: ["user_id"],
                value: [id.value]
            }
        }
    const FId = await tool.axiosApi("followed", data, "get")
    if (FId.count != 0) {
        let followedId = []
        for (let index = 0; index < FId.data.length; index++) {
            followedId[index] = FId.data[index].follows_id
        }
        FldUsers.value = followedId

        const data = {
                key: "Search",
                limit: limit.value,
                offset: offset.value,
                columns: ["created_at", "id", "image", "title", "author_id", "content"],
                data: {
                    key: ["author_id"],
                    value: [followedId]
                },
                order: [["created_at", "desc"]]
            }
        const blog = await tool.axiosApi("article", data, "get")
        let allBlog = {}
        if (blog.count != 0) {
            pageCount.value = blog.count
            for (let index = 0; index < blog.data.length; index++) {
                blog.data[index].content = blog.data[index].content.substring(0, 50) + "......"
                let user = await getUser(blog.data[index].author_id)
                blog.data[index].user = user.data[0]
                allBlog[`${blog.data[index].created_at}`] = []
                for (let temp = 0; temp < blog.data.length; temp++) {
                    if (blog.data[index].created_at == blog.data[temp].created_at) {
                        allBlog[`${blog.data[index].created_at}`].push(blog.data[temp])
                    } {
                        continue
                    }
                }
            }
        }
        blogs.value = Object.values(allBlog);
    }
} catch (error) {
        
    }
}
async function getUser(id) {
    try {

        const data = {
            limit:FldLimit.value,
            offset:FldOffset.value,
            key: "Search",
            columns: ["id", "nickname", "avatar"],
            data: {
                key: ["id"],
                value: [id]
            }
        }
        const user = await tool.axiosApi("user", data, "get")
    FldUserCount.value = user.count
    return user
} catch (error) {
        
    }
}
async function SearchUser(value) {
    try {
        const data = {
            key: "Search",
            columns: ["id","nickname","avatar"],
            data: {
                OpLike:true,
                key: ["id","username","nickname"],
                value: [value],
                Or:true
            }
        }
        const user = await tool.axiosApi("user", data, "get")
    FldUser.value = []
    for (let index = 0; index < user.data.length; index++) {
        const data = {
            key: "Search",
            data: {
                key: ["user_id","follows_id"],
                value: [id.value,user.data[index].id],
            }
        }
    const FldUsers = await tool.axiosApi("followed", data, "get")
    if(FldUsers.count!=0){
        FldUser.value.push(user.data[index])
    }else{

    }
    }
            
} catch (error) {
        
    }

}
async function changeFld(){
    try {
   await SearchUser(search_input_value.value)
} catch (error) {
        
    }
}
async function SearchFldUser() {
    try {
    let user = await getUser(FldUsers.value)
    FldUser.value = user.data
} catch (error) {
        
    }
}
async function handlePageChange(value) {
    try {
    offset.value = value
    await GetFollId()
    window.scrollTo(0, 0)
} catch (error) {
        
    }
}
onMounted(async () => {
    try {
    await GetFollId()
    await SearchFldUser()
} catch (error) {
        
    }
})
function GotoContent(value) {
    const url = router.resolve({ name: 'BlogContent', params: { BlogId: value } }).href
    window.open(url, '_blank')
}
function GotoHomePage(value) {
    const url = router.resolve({ name: 'homePage', params: { userID:value } }).href
    window.open(url, '_blank')
}
</script>
<template>
    <div class="FollBody">
        <div ref="FldUserRef" class="FldUser">
            <div ref="FldUser_searchRef" class="FldUser_search" >
            <el-input v-model="search_input_value" class="search_input" @change="changeFld" suffix-icon="search" placeholder="搜索用户" ></el-input>
        </div>
            <el-row gutter="20">
                <el-col v-for="item in FldUser" :span="2">
                    <div @click="GotoHomePage(item.id)" class="FldUser_user">
                        <el-image class="FldUser_avatar " :src="getImgPath + item.avatar"></el-image>
                        <div>
                            <el-text class="w-150px mb-2" truncated>
                                {{ item.nickname }}
                            </el-text>
                        </div>
                    </div>
                </el-col>

            </el-row>
            <div class="bottom">
        <div>
            <el-pagination hide-on-single-page="true" @current-change="handlePageChange" :background="true" layout="prev, pager, next"
                :page-size="FldLimit" :total="FldUserCount" />
        </div>
    </div>
        </div>
        <div class="FldUser_bottom">
            <div>
                <el-button @click="openFIdUser()" type="info" :icon="(OnFIdUser==false ? ArrowDownBold:ArrowUpBold) "  />
            </div>

        </div>
        <div class="UserTime">
            <el-timeline>
                <template v-for="(item, index) in blogs">
                    <el-timeline-item color="#002CC0" :icon="StarFilled" size="large" :timestamp="item[0].created_at"
                        placement="top">
                        <el-card @click="GotoContent(value.id)" v-for="(value, key) in item" class="TimeCard">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <el-image fit="cover " class="image" :src="getImgPath + value.image"></el-image>
                                </el-col>
                                <el-col class="content" :span="20">
                                    <h4>{{ value.title }}</h4>
                                    <h3>{{ value.content }}</h3>
                                    <div class="user">
                                        <el-image class="avatar" :src="getImgPath + value.user.avatar"></el-image>
                                        <p>{{ value.user.nickname }}</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-timeline-item>
                </template>
            </el-timeline>
        </div>
    </div>
    <div class="bottom">
        <div>
            <el-pagination @current-change="handlePageChange" :background="true" layout="prev, pager, next"
                :page-size="limit" :total="pageCount" />
        </div>
    </div>
</template>

<style scoped >
.FollBody {
    padding: 20px;
}
.FollBody .FldUser_search{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 10px;
    transition: 0.8s;
    height: 0px;
    overflow: hidden;
}
.FollBody .FldUser_search .search_input{
    width: 400px;
}
.FollBody .FldUser {
    padding: 5px;
    transition: 0.8s;
    overflow: hidden;
    height: 100px;
    background-color: white;
    border-radius: 5px;
}

.FollBody .FldUser_bottom {
    width: 100%;
    background-color: white;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.FollBody .FldUser .FldUser_user {
    color: rgb(154, 154, 154);
    text-align: center;
}

.FollBody .FldUser .FldUser_avatar {
    box-sizing: border-box;
    border: 10px solid white;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.FollBody .UserTime .TimeCard {
    margin-top: 20px;
}
.FollBody .UserTime .TimeCard .content h3{
    font-size: 13px;
    color: rgb(166, 166, 166);
}
.user {
    font-size: 13px;
    display: flex;
    align-items: center;
}

.user .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.image {
    border-radius: 5px;
    width: 100%;
    height: 150px;
}

.bottom {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}
</style>
